<template>
	<view class="comp-content">
		<view class="topBox ss-flex ss-row-between ss-p-x-30">
			<view class="topBox-title" :style="{color:data.title.color}">
				{{data.title.text}}
			</view>
			<image class="topBox-icon" src="/icon/h_right.png" />
		</view>
		<view class="bottomBox ss-p-x-16 ss-p-b-24 ss-flex">
			<view class="bottomBox-item ss-flex ss-flex-1" 
				v-for="item in data.list" :key="item.src" @click="onTap(item)">
				<su-image :src="item.src"  width="84" height="84" mode="aspectFill"/>
				<view class="bottomBox-item-right ss-m-l-10 ss-flex-col ss-row-between">
					<view class="bottomBox-item-title ss-line-1" :style="{color:item.title.color}">
						{{item.title.text}}
					</view>
					<view class="bottomBox-item-subtitle ss-line-1" :style="{color:item.subtitle.color}">
						{{item.subtitle.text}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, computed } from 'vue';
	import sheep from '@/sheep';
	// 接收参数
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({}),
		},
		styles: {
			type: Object,
			default: () => ({}),
		},
	});
	function onTap(item){
	  // #ifdef MP-WEIXIN
	  if(item.isMp == 1){
		  uni.navigateToMiniProgram({
			appId: item.mp.appid,
			path: item.mp.path,
			envVersion:'release',
			complete(res) {
			  // 打开成功
			  console.log('navigateToMiniProgram',res);
			},
		  });
	  }else{
		  sheep.$router.go(item.url)
	  }
	  // #endif
	  // #ifndef MP-WEIXIN
	  sheep.$router.go(item.url)
	  // #endif
	}
</script>

<style lang="scss" scoped>
	.comp-content{
		.topBox{
			height: 100rpx;
			.topBox-title{
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: bold;
				line-height: normal;
				text-align: center;
				letter-spacing: normal;
				color: #202020;
			}
			.topBox-icon{
				width: 8rpx;
				height: 20rpx;
			}
		}
		.bottomBox{
			
		}
	}
</style>
